const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    // 指定我们打包的入口文件
    entry: {
        index: './src/index.js',
        another: './src/another-module.js'
    },
    // 输出的目录
    output: {
       
        // 输出的路径
        path: path.resolve(__dirname, '../dist'),
        // 每一次打包都将上一次的删除，添加上一个可选参数
        clean: true,
        // 通过资源模块打包的文件存放在哪个文件的那个目录下,ext代表使用他们原来的后缀名
        assetModuleFilename: 'images/[contenthash][ext]',
    },
    // 观察模式
    // watch:true,

    plugins: [
        new HtmlWebpackPlugin({
            // 将哪个文件进行打包
            template: './index.html',
            // 输出的文件名称叫什么名字
            filename: 'app.html',
            // 将script标签注入哪里
            inject: 'body'
        }),
        // 将打包好的css文件存放到指定的路径和包下
        new MiniCssExtractPlugin({
            filename: 'styles/[contenthash].css'
        }),
    ],
    module: {
        rules: [
            {
                test: /\.png$/,
                type: 'asset/resource',
                generator: {
                    filename: 'images/[contenthash][ext]'
                }
            },
            {
                test: /\.svg$/,
                type: 'asset/inline'
            },
            {
                test: /\.txt$/,
                type: 'asset/source'
            },
            {
                test: /\.jpg$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        // 大于4M就是资源文件
                        maxSize: 4 * 1024 * 1024
                    }
                }
            },
            {
                test: /\.(css|less)$/,
                // MIniCssExtractPlugin用于将css代码打包后通过link的方式注入页面
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                type: 'asset/resource'
            },
            // {
            //     test:/\.toml$/,
            //     type:'json',
            //     parser:{
            //         parse:toml.parse
            //     }
            // }
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },
    optimization: {
        splitChunks: {
            // 缓存组，将特定的包缓存到浏览器中
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all'
                }
            }
        }
    }
}



// 当我们的常量是大写字母开始的时候，证明他可能是一个对象或则是一个函数，我们需要实例化一下